import React, { Component } from 'react';
import {
    Flex,
    Icon,
    Modal,
    Carousel
} from 'antd-mobile';
import CanChangeScroll from '../../components/CanChangeScroll/CanChangeScroll';
import Img from '../../components/Img/Img';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import xing from '../../assets/svg/xing.svg';
import xing2 from '../../assets/svg/xing2.svg';

import { evaluate_item, evalute_madel } from "./EvaluateGoodsItem.less";

class EvaluateGoodsItem extends Component {
    constructor(props){
        super(props);
        this.state={
            visible:false,
            num:0
        };

    }
    show  = (i) =>{
        this.setState({
            visible:true,
            num:i
        })
    }


    render () {
        const { v } = this.props;
        let { visible, num } = this.state;
        const imgArr = v.gevalImage; //=="" ? [] : v.gevalImage.split(",");

        return (
            <div className={evaluate_item}>
                <Flex style={{ padding:'0.2rem 0rem' }} justify="between">
                    <Flex>
                        <div className="mmember_avatar">
                            <Img src={v.gevalFrommemberAvatar}></Img>
                        </div>
                        {/*<span style={{ marginLeft:'0.1rem' }}>{ v.gevalIsAnonymous ==0 ? v.gevalFrommembername.replace(/(.).*(.)/, "$1***$2") : v.gevalFrommembername  }</span>*/}
                        <span style={{ marginLeft:'0.1rem' }}>{  v.gevalFrommembername  }</span>
                    </Flex>
                    <div>
                        {
                            [...Array(v.gevalScore)].map((_, ii) => {
                                return <Icon size="xs" type={xing.id} key={ii} />
                            })
                        }
                        {
                            [...Array(5 - v.gevalScore)].map((_, ii) => {
                                return  <Icon size="xs" type={xing2.id} key={ii} />
                            })
                        }
                    </div>
                </Flex>
                <div style={{ color:"#666", padding:"0.2rem 0rem" }}>{ v.gevalContent  }</div>
                <Flex style={{ position:'relative' }}>
                    {imgArr.slice(0,4).map((vv,ii,aa)=>{
                        return (
                            <div onClick={ ()=>{ this.show(ii) } } style={ ii==0 ? { paddingLeft:"0rem" }:{} } className="gevalImage" key={ii}>
                                <Img  src={vv}></Img>
                            </div>
                        )
                    })}
                    { imgArr.length>4 ? <div className="geval_image_length">共{imgArr.length}张</div>:"" }
                </Flex>

                <div
                    className="text-overflow-hidden spec_info"
                    dangerouslySetInnerHTML={{ __html: v.specInfo }}
                />



                <Modal
                    visible={visible}
                    transparent
                    maskClosable={false}
                    className={evalute_madel}
                    //onClose={this.onClose('modal1')}
                    //title="Title"
                    // footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
                    // wrapProps={{ onTouchStart: this.onWrapTouchStart }}
                >
                    <div style={{ height:"100%" }}>
                        <Flex className="title" justify="between">
                            <div
                                onClick={()=>{ this.setState({
                                    visible:false
                                }) }}
                            >
                                <Icon type="left" />
                            </div>
                            <div>
                                {num+1}/{v.gevalImage.length}
                            </div>
                            <div></div>
                        </Flex>

                        <Flex className="ev_carousel">
                            <Carousel
                                //key={this.state.num}
                                //  className={index_banner}
                                selectedIndex={num}
                                //autoplay={data.length != 1}
                                autoplay={false}
                                afterChange={(n)=>{
                                    this.setState({
                                        num:n
                                    })
                                }}
                                infinite
                                dots={false}
                                // resetAutoplay={true}
                            >
                                {
                                    imgArr.map((item, index) => (
                                        <div key={index}>
                                            <NoLazyImg
                                                onClick={()=>{ this.setState({
                                                    visible:false
                                                }) }}
                                                onLoad={
                                                    ()=>{
                                                        window.dispatchEvent(new Event('resize'));
                                                    }
                                                }
                                                style={{ width:"100%", height:"auto" }}
                                                src={item}
                                            />
                                        </div>
                                    ))
                                }
                            </Carousel>
                        </Flex>


                        <CanChangeScroll wrapperId="EvaluateItemWraperId" targetId="EvaluateItemTargetId" className="evaluate_scroll">
                            <div>
                                {
                                    [...Array(v.gevalScore)].map((_, ii) => {
                                        return <Icon size="xxs" type={xing.id} key={ii} />
                                    })
                                }
                                {
                                    [...Array(5 - v.gevalScore)].map((_, ii) => {
                                        return  <Icon size="xxs" type={xing2.id} key={ii} />
                                    })
                                }
                            </div>
                            <div
                                style={{ fontSize:"0.22rem", color:"#ccc" }}
                                className="spec_info"
                                dangerouslySetInnerHTML={{ __html: v.specInfo }}
                            />
                            <div style={{ padding:'0.1rem 0rem' }}>{ v.gevalContent  }</div>
                        </CanChangeScroll>



                    </div>

                </Modal>
            </div>
        );
    }
}

export default EvaluateGoodsItem;